import QtQuick 2.2
import QtQuick.Window 2.1
import Enginio 1.0

Window {
    title: "Exercises"
    flags: Qt.Dialog
    width: 400
    height: 640

    signal backPressed

    Rectangle {
        id: root
        color: "#f4f4f4"
        anchors.fill: parent
        focus: true

        EnginioModel {
            id: enginioModel
            client:     EnginioClient {
                id: enginioClient
                backendId: "52dd09f3e5bde50ccc000cff"

                onError: console.log("Enginio error: " + reply.errorCode + ": " + reply.errorString)
                onFinished: console.log("Enginio finished: " + reply)
            }
            query: {"objectType": "objects.exercise" }
        }

        Header {
            id: header
            iconSource: "qrc:images/workout.jpg"
            title: "Exercises"
        }

        ListView {
            id: listview
            model: enginioModel
            delegate: listItemDelegate
            anchors.top: header.bottom
            anchors.bottom: footer.top
            width: parent.width
            clip: true

            // Animations
            add: Transition { NumberAnimation { properties: "y"; from: root.height; duration: 250 } }
            removeDisplaced: Transition { NumberAnimation { properties: "y"; duration: 150 } }
            remove: Transition { NumberAnimation { property: "opacity"; to: 0; duration: 150 } }
        }

        Rectangle {
            id: footer
            height: 70
            width: parent.width
            anchors.bottom: parent.bottom

            Rectangle {
                y: -1 ; height: 1
                width: parent.width
                color: "#bbb"
            }
            Rectangle {
                y: 0 ; height: 1
                width: parent.width
                color: "white"
            }
            Rectangle {
                id: emptyRect
                anchors.left: parent.left
                anchors.leftMargin: 16
                width: 32
                anchors.verticalCenter: parent.verticalCenter
            }

            Rectangle {
                anchors.left: emptyRect.right
                anchors.right: addButton.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.margins: 16
                color: "gainsboro"
                height: footer.height * 0.8
                radius: height * 0.5

                TextInput{
                    id: textInput
                    anchors.fill: parent
                    clip: true
                    anchors.leftMargin: 14
                    anchors.rightMargin: 14
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 22
                    Text {
                        id: placeholderText
                        anchors.fill: parent
                        verticalAlignment: Text.AlignVCenter
                        visible: !(parent.text.length || parent.inputMethodComposing)
                        font: parent.font
                        text: "New exercise..."
                        color: "#aaa"
                    }
                    onAccepted: {
                        enginioModel.append({"name": textInput.text})
                        textInput.text = ""
                    }
                }
            }

            Item {
                id: addButton

                width: 40 ; height: 40
                anchors.margins: 20
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                enabled: textInput.text.length
                Image {
                    height: parent.height
                    width: height
                    source: addMouseArea.pressed ? "qrc:icons/add_pressed.png" : "qrc:icons/add.png"
                    anchors.centerIn: parent
                    opacity: enabled ? 1 : 0.5
                }
                MouseArea {
                    id: addMouseArea
                    anchors.fill: parent
                    onClicked: textInput.accepted()
                }
            }
        }

        Component {
            id: listItemDelegate

            BorderImage {
                id: item

                width: parent.width ; height: 70
                border.left: 5; border.top: 5
                border.right: 5; border.bottom: 5

                Rectangle {
                    id: checkbox
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    width: 32
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    id: todoText
                    text: name
                    font.pixelSize: 26
                    color: "#333"

                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: checkbox.right
                    anchors.right: parent.right
                    anchors.leftMargin: 12
                    anchors.rightMargin: 40
                    elide: Text.ElideRight
                }

                // Show a delete button when the mouse is over the delegate
                Image {
                    id: removeIcon
                    height: todoText.height
                    width: height
                    source: removeMouseArea.pressed ? "qrc:icons/delete_pressed.png" : "qrc:icons/delete.png"
                    anchors.margins: 20
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    opacity: enabled ? 1 : 0.5
                    Behavior on opacity {NumberAnimation{duration: 100}}
                    MouseArea {
                        id: removeMouseArea
                        anchors.fill: parent
                        onClicked: enginioModel.remove(index)
                    }
                }
                Rectangle {
                    width: parent.width ; height: 1
                    anchors.bottom: parent.bottom
                    color: "#bbb"
                }
            }
        }

        Keys.onReleased: {
            if ( event.key === Qt.Key_Back && visible )
            {
                console.log("Back button captured - wunderbar !")
                event.accepted = true
                backPressed()
            }
        }
    }
}
